<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-10-10 15:55:34
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-10-11 10:33:55
-->
<template>
    <div class="profile">
        <el-popover v-model="visible" trigger="hover" placement="bottom">
            <div style="display: table-caption;">
                <el-button type="text" @click="exit">退出系统</el-button>
                <el-button type="text" @click="setting=true">系统设置</el-button>
            </div>

            <div class="logout" slot="reference" @click="visible=true">
                <img src="static/images/user.png" style="" />
                <p>{{userInfo ? userInfo.name : '当前用户'}}</p>
            </div>

        </el-popover>

        <el-dialog title="系统设置" :visible.sync="setting" :modal="false" width="450px" :close-on-click-modal="false"
            :before-close="() => { setting=false }">
            <Setting />
        </el-dialog>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import db from "@/utils/localstorage";
import Setting from "./setting/index.vue"

export default {
    components: {
        Setting
    },
    data() {
        return {
            setting: false,
            userInfo: null,
            visible: false
        }
    },
    mounted() {
        let me = this;
        me.userInfo = db.get("USER");;
    },
    methods: {
        ...mapMutations("account", ["removeToken"]),
        exit() {
            this.$confirm("是否确认退出？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.removeToken();
                this.$router.push("./login");
            }).catch(() => { });
        },
    },

}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/index.scss";

.profile {

    .logout {
        min-width: 80px;
        height: 100%;
        text-align: center;
        cursor: pointer;
        padding: 0px 10px;
        float: right;

        display: inline-flex;
        line-height: 70px;

        img {
            padding-top: 22px;
            width: 24px;
            height: 24px;
        }

        p {
            font-size: 14px;
            padding: 0px 6px;
            margin: 0px;
            @include font_color("label-color");
        }
    }

    .logout:hover {
        p {
            // @include background_color("hover-color");
            // color:cornflowerblue;
            @include font_color("hover-color");
        }
    }
}
</style>